import T from 'ant-design-vue/es/table/Table'
import get from 'lodash.get'

export default {
	data() {
		this.handleComponents = {
			header: {
				cell: (h, props, children) => {
					let thDom = null
					const { key, ...restProps } = props
					const col = this.dataColumns.find(item => {
						const k = item.dataIndex || item.key
						return k === key
					})
					if (!col || !col.width) {
						return <th {...restProps}>{children}</th>
					}
				
					return (
						<th {...restProps} v-ant-ref={r => (thDom = r)} width={col.width} class="resize-table-th">
							{children}
						</th>
					)
				},
			},
		}
		return {
			needTotalList: [],
			selectedRows: [],
			selectedRowKeys: [],
		}
	},
	props: Object.assign({}, T.props, {
		pagination: {
			type: [Boolean, String, Object],
			default: false,
		},
		alert: {
			type: Boolean,
			default: false,
		},
		rowKey: {
			type: [String, Function],
			default: 'key',
		},
		dataSource: {
			type: Array,
			required: true,
		},
		rowSelection: {
			type: Object,
			default: null,
			required: false,
		},
		dataColumns: {
			type: Array,
			default: true,
		},
		change: {
			type: Function,
			required: false,
			default: (page) => { }
		},
		//表格行双击事件
		onRowDoubleClick: {
			type: Function,
			required: false,
			default: (record, index, event) => {
				event.stopPropagation(); //阻止默认事件
			}
		},
		//表格行鼠标移入事件
		onMouseenter: {
			type: Function,
			required: false,
			default: (record, index, event) => {
				event.stopPropagation(); //阻止默认事件
			}
		},
		//表格行鼠标移出事件
		onMouseleave: {
			type: Function,
			required: false,
			default: (record, index, event) => {
				event.stopPropagation(); //阻止默认事件
			}
		},
	}),
	methods: {
		updateSelect(selectedRowKeys, selectedRows) {
			this.selectedRows = selectedRows
			this.selectedRowKeys = selectedRowKeys
			const list = this.needTotalList
			this.needTotalList = list.map(item => {
				return {
					...item,
					total: selectedRows.reduce((sum, val) => {
						const total = sum + parseInt(get(val, item.dataIndex))
						return isNaN(total) ? 0 : total
					}, 0)
				}
			})
		},
	},
	render() {
		const props = {}

		const localKeys = Object.keys(this.$data)

		Object.keys(T.props).forEach(k => {
			const localKey = `local${k.substring(0, 1).toUpperCase()}${k.substring(1)}`
			if (localKeys.includes(localKey)) {
				props[k] = this[localKey]
				return props[k]
			}

			this[k] && (props[k] = this[k])
			return props[k]
		})

		// 设置表格多语言
		const table = (
			<a-config-provider class="element-top"
			>
				<a-table
					// record 指的当前行的数据内容，rowkey指的是当前行的下标
					customRow={(record, rowIndex) => {
						return {
							on: { // 事件
								dblclick: this.onRowDoubleClick.bind(this, record, rowIndex),
								// click: (event) => {},
								// contextmenu: (event) => { },
								mouseenter: this.onMouseenter.bind(this, record, rowIndex),  // 鼠标移入行
								mouseleave: this.onMouseleave.bind(this, record, rowIndex),  // 鼠标移出行
							},
						};
					}}
					pagination={this.pagination}
					components={this.handleComponents}
					rowSelection={this.rowSelection}
					columns={this.dataColumns}
					dataSource={this.data}
					onChange={this.change}
					{...{ props, scopedSlots: { ...this.$scopedSlots } }}
					onExpand={(expanded, record) => {
						this.$emit('expand', expanded, record)
					}}
				>
					{Object.keys(this.$slots).map(name => (
						<template slot={name}>{this.$slots[name]}</template>
					))
					}
					{this.dataColumns.map((item, index) => (
						<template slot={item.slotName}>
							<span key={index}>{item.scopedSlots.title}</span>
						</template>
					))
					}

				</a-table>
			</a-config-provider>
		)

		return <div class="table-wrapper">
			{table}
		</div>
	},
}